<!DOCTYPE html>
<html>
<head>
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="app has-head has-banner">
    <div class="app-head">
        <ul class="row" style="padding-top:5px;">
            <li class="col v-m" style="padding-top:7px;">
                <p>姓名：张小雅</p>
                <p>学号：5876324</p>
                <p>专业：信息工程15级</p>
            </li>
            <li class="col t-r v-b">
                <img class="face" src="img/face.png"/>
            </li>
        </ul>
        <ul class="row">
            <li class="col v-t">
                <a class="btn btn-opatiy btn-conner has-icon c-b" href="预约.html"><img align="absmiddle" src="img/ion-clock.png"/>我要预约</a>
            </li>
            <li class="col t-r v-t">
                <a class="btn btn-opatiy btn-conner has-icon c-b" href="#"><img align="absmiddle" src="img/take-code.png"/>扫码就坐</a>
            </li>
        </ul>
    </div>
    <div class="app-view">
        <div class="app-view-content">
            <!--没有预约座位-->
            <div class="app-null row" style="display:none;">
                <div class="col">
                    <img src="img/yuyue-no.png" />
                    <p>您尚未预约座位, 快来吧！</p>
                </div>
            </div>
            <!---->
            <ul class="seat-list">
                <li class="seat-item">
                    <p class="item-time"><span class="item-num">1</span>2016-06-08&nbsp;&nbsp;&nbsp;09:45-22:00</p>
                    <p class="item-txt">致未来图书馆1层测试自习室 2-8 座</p>
                    <p class="item-txt">距离签到时间<span class="c-p">3小时48分</span></p>
                    <ul class="row mt-1">
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="查看座位.html"><img align="absmiddle" src="img/see.png"/>查看座位</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#open-modal1"><img align="absmiddle" src="img/change.png"/>更换座位</a>
                        </li>
                    </ul>
                    <ul class="row top-line">
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#open-modal2"><img align="absmiddle" src="img/cancel.png"/>取消</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/edit.png"/>续约</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/port.png"/>签到</a>
                        </li>
                    </ul>
                </li>
                <li class="seat-item">
                    <p class="item-time"><span class="item-num">2</span>2016-06-08&nbsp;&nbsp;&nbsp;09:45-22:00</p>
                    <p class="item-txt">致未来图书馆1层测试自习室 2-8 座</p>
                    <p class="item-txt">距离签到时间<span class="c-p">3小时48分</span></p>
                    <ul class="row mt-1">
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="查看座位.html"><img align="absmiddle" src="img/see.png"/>查看座位</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#open-modal1"><img align="absmiddle" src="img/change.png"/>更换座位</a>
                        </li>
                    </ul>
                    <ul class="row top-line">
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#open-modal2"><img align="absmiddle" src="img/cancel.png"/>取消</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/edit.png"/>续约</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/port.png"/>签到</a>
                        </li>
                    </ul>
                </li>
                <li class="seat-item">
                    <p class="item-time"><span class="item-num">3</span>2016-06-08&nbsp;&nbsp;&nbsp;09:45-22:00</p>
                    <p class="item-txt">致未来图书馆1层102研修室预约人数2人，已签到0人，预约码43830</p>
                    <p class="item-txt">距离签到时间<span class="c-p">3小时48分</span></p>
                    <ul class="row top-line" style="margin-top:1rem;">
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#open-modal2"><img align="absmiddle" src="img/cancel.png"/>取消</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/port.png"/>签到</a>
                        </li>
                    </ul>
                </li>
                <li class="seat-item">
                    <p class="item-time"><span class="item-num">3</span>2016-06-08&nbsp;&nbsp;&nbsp;09:45-22:00</p>
                    <p class="item-txt">致未来图书馆1层测试自习室 2-8 座</p>
                    <p class="item-txt">距离签到时间<span class="c-p">3小时48分</span></p>
                    <ul class="row mt-1">
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="查看座位.html"><img align="absmiddle" src="img/see.png"/>查看座位</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#open-modal1"><img align="absmiddle" src="img/change.png"/>更换座位</a>
                        </li>
                    </ul>
                    <ul class="row top-line">
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#open-modal2"><img align="absmiddle" src="img/cancel.png"/>取消</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/edit.png"/>续约</a>
                        </li>
                        <li class="col t-c">
                            <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/port.png"/>签到</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="app-footer">
        <div class="nav row">
            <a class="col active" href="首页.html">首页</a>
            <a class="col" href="预约.html">预约</a>
            <a class="col" href="记录.html">记录</a>
            <a class="col" href="设置.html">设置</a>
        </div>
    </div>
</div>
<div id="open-modal1" class="modal-window">
    <div class="row">
        <div class="col v-m">
            <div class="modal-title">
                <h2>更换座位</h2>
                <a href="#modal-close" title="Close" class="modal-close"></a>
            </div>
            <img src="img/change-seat.png" />
            <p>请您选择更换的方式</p>
            <a class="btn btn-block btn-conner btn-blue" href="#">手动更换</a>
            <a class="btn btn-block btn-conner btn-pink" href="#">扫码更换</a>
        </div>
    </div>
</div>
<div id="open-modal2" class="modal-window">
    <div class="row">
        <div class="col v-m">
            <div class="modal-title">
                <h2>取消预约</h2>
                <a href="#modal-close" title="Close" class="modal-close"></a>
            </div>
            <img src="img/cancel-seat.png" />
            <h3>2016-06-08     09:45-22:00<br>致未来图书馆1层测试自习室 2-8 座</h3>
            <p>您确定要取消此次预约吗</p>
            <a class="btn btn-block btn-conner btn-blue" href="#">确定</a>
        </div>
    </div>
</div>
</body>
</html>
